<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="phases.length? phases[0].name:'复核'"
    width="1240px"
    :visible.sync="visibleValue"
  >
    <!-- 重构布局开始 -->
    <div class="review-box">
      <div class="idx-part">
        <!-- 视频区域 -->
        <video
          controls
          autoplay
          ref="handleVideo"
          :src="phases&&phases.length? phases[0].handFile:''"
        />
        <!-- idx图表 -->
        <div class="idx-chart">
          <IdxChart :list="idxChartList" />
        </div>
      </div>
      <div class="analysis-part">
        <div class="title">
          分析意见
        </div>
        <div class="form-area">
          <el-form
            :model="form"
            size="small"
            label-width="100px"
          >
            <el-form-item
              label="类别："
            >
              <label slot="label">类&emsp;&emsp;别：</label>
              <span>{{ form.code }}</span>
            </el-form-item>
            <el-form-item
              label="分析项目："
            >
              <div style="display: flex; align-items: center; ">
                <el-select
                  v-model="form.phaseId"
                  placeholder="请选择分析项目"
                  @change="changePhase"
                >
                  <el-option
                    v-for="phase in phases"
                    :key="phase.id"
                    :label="phase.name"
                    :value="phase.id"
                  >
                    <span style="float: left">{{ phase.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ phase.date }}</span>
                  </el-option>
                </el-select>
                <span
                  v-if="snapshot"
                  style="margin-left: 10px;"
                >
                  <el-popover
                    trigger="hover"
                    placement="top"
                  >
                    <div>
                      <img :src="snapshot">
                    </div>
                    <div slot="reference">
                      <el-tag size="medium">
                        查看截图
                      </el-tag>
                    </div>
                  </el-popover>
                </span>
              </div>
            </el-form-item>
            <el-form-item
              label="状态："
            >
              <label slot="label">状&emsp;&emsp;态：</label>
              <el-select
                v-model="form.illegal"
              >
                <el-option
                  v-for="status in statusOptions"
                  :key="status.value"
                  :label="status.text"
                  :value="status.value"
                >
                  <span style="float: left">{{ status.text }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="分析内容："
            >
              <el-input
                type="textarea"
                rows="5"
                placeholder="请输入"
                autocomplete="off"
                v-model="form.content"
              />
            </el-form-item>
            <el-form-item
              label="存在问题："
            >
              <el-input
                type="textarea"
                rows="5"
                placeholder="请输入"
                autocomplete="off"
                v-model="form.question"
              />
            </el-form-item>
            <el-form-item
              label="分析意见："
            >
              <el-input
                type="textarea"
                rows="5"
                placeholder="请输入"
                autocomplete="off"
                v-model="form.opinion"
              />
            </el-form-item>
          </el-form>
          <div class="btn-wrap">
            <el-button
              type="plain"
              size="mini"
              @click="() => visibleValue = false"
            >
              重置
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="submit"
            >
              确定
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 重构布局结束 -->

    <!-- 原始结构开始 注释 -->
    <el-form
      :model="form"
      v-if="false"
    >
      <el-form-item
        label="类别"
        label-width="65px"
      >
        <span>{{ form.code }}</span>
      </el-form-item>
      <el-form-item
        label="分析项目"
        label-width="100"
      >
        <div style="display: flex; align-items: center; ">
          <el-select
            v-model="form.phaseId"
            placeholder="请选择分析项目"
            @change="changePhase"
          >
            <el-option
              v-for="phase in phases"
              :key="phase.id"
              :label="phase.name"
              :value="phase.id"
            >
              <span style="float: left">{{ phase.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ phase.date }}</span>
            </el-option>
          </el-select>
          <span
            v-if="snapshot"
            style="margin-left: 10px;"
          >
            <el-popover
              trigger="hover"
              placement="top"
            >
              <div>
                <img :src="snapshot">
              </div>
              <div slot="reference">
                <el-tag size="medium">
                  查看截图
                </el-tag>
              </div>
            </el-popover>
          </span>
        </div>
      </el-form-item>
      <el-form-item
        label="状态"
        label-width="65px"
      >
        <el-select
          v-model="form.illegal"
        >
          <el-option
            v-for="status in statusOptions"
            :key="status.value"
            :label="status.text"
            :value="status.value"
          >
            <span style="float: left">{{ status.text }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="分析内容"
        label-width="100"
      >
        <el-input
          v-model="form.content"
        />
      </el-form-item>
      <el-form-item
        label="存在问题"
        label-width="100"
      >
        <el-input
          v-model="form.question"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="分析意见"
        label-width="100"
      >
        <el-input
          v-model="form.opinion"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="false"
    >
      <el-button @click="() => visibleValue = false">
        取 消
      </el-button>
      <el-button
        type="primary"
        @click="submit"
      >
        确 定
      </el-button>
    </div>
    <!-- 原始结构结束 注释 -->
  </el-dialog>
</template>

<script>
// import { Component, Vue, Watch, Prop, Emit } from 'vue-property-decorator'
// import { DictModule } from '@/store/modules/dict'
// 引入idx曲线组件
import IdxChart from './IdxChart/index.vue'
// import { idxList } from '@/api/idx'
export default {
  components: {
    IdxChart
  },
  data(){
    return{
      form: {},
      statusOptions: [],
      idxChartList: [],
      handleFileSrc:this.phases.length ? this.phases[0].handFile : '',
      snapshot: this.form.base64Pic || this.base64pic,
      visibleValue: this.visible,
      phaseStatus: DictModule.phaseStatus,
      phaseDetailStatus: DictModule.phaseDetailStatus,
      phaseId: this.form.phaseId
    }
  },
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    phases: {
      type: Array,
      default() {
        return []
      }
    },
    loadAnalysisForm: {
      type: Function,
      default(params) {
        return params
      }
    },
    // idxDetail: {
    //   type: Object,
    //   default() {
    //     return {}
    //   }
    // },
    base64pic: {
      type: String,
      default: ''
    }
  },
  methods: {
    visibleValue(value) {
      this.$emit('update:visible', value)
    },
    submit() {
    const phase = this.phases.find((phase) => phase.id === this.form.phaseId)
    if (!phase || !phase.id) {
      this.$message({
        message: '请选择项点',
        type: 'warning'
      })
      return
    } else {
      this.visibleValue = false
    }
    const data = Object.assign({}, this.form, {
      item: phase.name,
      base64Pic: this.snapshot
    })
    return {
      data,
      phase
    }
    },
    initForm() {
        this.form = {
          phaseId: '',
          item: '',
          content: '',
          question: '',
          opinion: '',
          illegal: '',
          base64Pic: ''
        }
      },
  loadIdxItems() {
    const res = idxList({id: this.phases[0].id})
      if (res.data) {
        this.idxChartList = res.data
      } else {
        this.idxChartList = []
      }
    }
  },
  created() {
    if (this.phases.length) {
      this.loadIdxItems()
    }
  },
  Watch: {
    'visibleValue'(newV, oldV){
      // this.onVisibleChange() {
   
      // }
          if (this.visibleValue) {
            this.initForm()
            const phase = this.phases.length > 0 ? this.phases[0] : {}
            this.form = Object.assign({}, this.form, {
              phaseId: phase.id,
              item: phase.name,
              illegal: phase.illegal,
              code: phase.code
            })
            this.changePhase()
          }
    },
    'phases'(newV, oldV){
      //   this.onPhasesVideoChange(newV, oldV) {
 
      // },
             // 修改视频地址
        if (this.$refs.handleVideo && newV) {
          (this.$refs.handleVideo).src = newV.length > 0 ? newV[0].handFile : ''
        }
        // 重新获取idx曲线数据
        if ((newV.length && oldV && !oldV.length) || (newV.length && oldV && oldV.length && newV[0].id !== oldV[0].id)) {
          this.loadIdxItems()
        }

    },
    'form.phaseId'(newV, oldV){
      // this.onPhaseIdChange(newV) {

      // }
        if (!newV) return
        const obj = this.phases.find(item => {
          return item.id === newV
        })
        this.form.code = obj.code
        if (obj.code === 'H') {
          this.statusOptions = this.phaseStatus
        } else {
          this.statusOptions = this.phaseDetailStatus
        }

    }


  }
}

</script>

<style scoped>
::v-deep .el-dialog__body{
  padding:0;
}
::v-deep .el-dialog__header{
  padding:10px;
  background:#E5E5E5;
}
::v-deep .el-dialog__title{
  font-size:15px;
}
::v-deep .el-dialog__headerbtn{
  top:10px;
}
.review-box{
  position:relative;
}
 .review-box .analysis-part{
    position: absolute;
    top:0;
    right:0;
    width:400px;
    height:100%;
    overflow:auto;
  }
    .review-box .analysis-part  .title{
      height:40px;
      line-height:40px;
      padding-left:15px;
      font-size:14px;
      color:#323232;
      background:#F5F5F5;
      border-bottom:1px solid #D9D9D9;
    }
   .review-box .analysis-part .form-area{
      padding-top:20px;
      padding-right:26px;
      padding-left:10px;

    }
    .review-box .analysis-part .form-area::v-deep .el-textarea__inner{
      resize:none;
    }
    .review-box .analysis-part .form-area .btn-wrap{
      text-align:right;
    }
 .review-box .idx-part{
    margin-right:400px;
    height:656px;


  }
    .review-box .idx-part  video{
      width:100%;
      height:450px;
      background:#000;
      vertical-align: middle;
      object-fit:fill;

    }
    .review-box .idx-part  video  &:focus{
      outline:none;
    }
    .review-box .idx-part  .idx-chart {
      background:#06131D;
      height: 206px;
      padding: 10px;
      border-top:1px solid #ADADAD;

    }
     .review-box .idx-part  .idx-chart .btn {
        color: white;
        text-align: right;
      }
        /deep/ .el-switch__label {
          color: white;
        }
        /deep/ .el-switch__label.is-active {
          color: #00EE00;
        }
</style>

